<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="../include/admincontent.jsp" %>

<div id="Content">


    <table class="treeTable inputform">
        <thead>
        <tr>
            <td colspan='4'><b>基本信息</b></td>
        </tr>
        </thead>
        <tbody>${project}</tbody>
    </table>

<%--    <table class="layui-hide" id="tablelist_viewTitle" lay-filter="projectViewTitleTable"></table>--%>
    <div style=" padding: 10px 0px; text-align: center; font-size: 18px;">招聘岗位</div>

     <table class="layui-hide" id="tablelist_viewContent" lay-filter="projectViewContentTable"></table>

   <%-- <table class="table_center treeTable inputform" style="margin-top:5px;">
        <thead>
        <tr>
            <td colspan="10"><b>招聘岗位</b></td>
        </tr>
        <tr>
            <td width="8%">序号</td>
            <td width="20%">岗位名称</td>
            <td width="10%">招聘人数</td>
            <td width="14%">年龄</td>
            <td width="20%">工作年限</td>
            <td width="20">学历</td>
            <td width="8%">性别</td>
          &lt;%&ndash;  <td width="40">
                <button type="button" onFocus="blur()" class="add"></button>
            </td>&ndash;%&gt;
        </tr>
        </thead>
        <tbody>${jobs}</tbody>
    </table>--%>
    <div id="container" style="padding:20px; margin:5px auto; border:solid 1px #dfdfdf;"></div>
</div>
<script type="text/javascript" src="/resources/js/plugins/chart/highcharts.js"></script>
<script type="text/javascript">

    var urlGetID = GetQueryString("id");
  //  var urlView = '/Project/getProViewLayuiJson' + '?&id=' + urlGetID;
    var urlContent = '/Project/getProViewContentLayuiJson' + '?&id=' + urlGetID;
    var urlPic = '/Project/getProViewPicJson' +'?&id='+urlGetID;

    layui.use('table', function(){
        var viewTable = layui.table;

  /*      viewTable.render({
            id:'projectViewTitleTable'
            ,elem: '#tablelist_viewTitle'
            ,url:urlView
            ,title:'用户数据表'
            , height: 'full'
            ,cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'pname',title: '招聘方案', fixed:'left'}
                ,{field:'recruittype',title: '招聘方式', fixed:'center'}
                ,{field:'state',  title: '状态', fixed:'center'}
                ,{field:'flowdept',  title: '实施流程', fixed:'center'}
            ]]
        });*/

        viewTable.render({
            id:'projectViewContentTable',
            elem: '#tablelist_viewContent' ,
            url:urlContent,
            title:'用户数据表',
            height: 'full',
            //cellMinWidth: 20, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [/*[
                {title: '招聘岗位', colspan:7,align: 'center'},
                ],*/[
                {field:'id', title: '序号', fixed:'center',sort: true},
                {field:'jobname',title: '岗位名称', fixed:'left',sort: true},
                {field:'zpcount',title: '招聘人数', fixed:'center', sort: true},
                {field:'age', title: '年龄', fixed:'center',sort: true},
                {field:'workyear', title: '工作年限', fixed:'center',sort: true},
                {field:'eduname', title: '学历', fixed:'center', sort: true},
                {field:'gender', title: '性别', fixed:'center', sort: true}
            ]],
        });

        getData();
    });

    //创建图表
    var chart;

    function getData(){
        $.ajax({
            type : "POST",
            url : urlPic,
            dataType : "json",
            success : function(data) {
               // console.log(data);
                if(data.data.flags){
                    $("#container").css("display","block");
                    chart = new Highcharts.Chart( {
                        chart : {
                            renderTo : 'container',
                            type : 'column',
                        },
                        title : {
                            text : data.data.title,
                            style: {
                                color: '#000',
                                fontSize:'20px',
                                fontFamily:'微软雅黑',
                                fontWeight:'bold'
                            }
                        },
                        xAxis : {
                            categories : data.data.xAxis_categories,
                            // title : {  text : 'name' }
                            labels: {
                                formatter: function () {
                                    return this.value
                                },
                                style: {
                                    color: '#000',
                                    fontSize:'14px',
                                    fontFamily:'微软雅黑'
                                }},
                        },
                        yAxis : {
                            min : data.data.yAxis_min,
                            title : {
                                text : data.data.yAxis_title,
                                style: {
                                    color: '#000',
                                    fontSize:'16px',
                                    fontFamily:'微软雅黑'
                                }
                            },
                            labels: {
                                formatter: function () {
                                    return this.value
                                },
                                style: {
                                    color: '#000',
                                    fontSize:'14px',
                                    fontFamily:'微软雅黑'
                                }},
                        },
                        /* legend: {
                             enabled: false
                         },*/
                        /*tooltip : {
                            formatter : function() {
                                return '' + this.series.name + ': ' + this.y + '';
                            }
                        },*/
                        credits : {
                            enabled: false
                        },
                         plotOptions : {
                             column : {
                                 pointPadding : data.data.plotOptions_column_pointPadding,
                                 borderWidth :  data.data.plotOptions_column_borderWidth,
                             }
                         },
                        colors: ['orange', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                        series : [ {
                            name : data.data.series_name1,
                            data : data.data.series_data1,
                        },{
                            name : data.data.series_name2,
                            data : data.data.series_data2,
                        } ]
                    });
                }else{
                    $("#container").css("display","none");
                }
            }
        });
    }
</script>
</body>
</html>